<div class="chart-wrapper">
  <div class="chart-toolbar">
    @if (enableTimeframeSelector()) {
      <div class="timeframe-selector">
        <span class="timeframe-label">
          {{ 'F.METRIC.CMP.TIME_FRAME_LABEL' | translate }}
        </span>
        <mat-radio-group
          class="timeframe-radios"
          [value]="selectedTimeframe()"
          (change)="onTimeframeRadioChange($event)"
          [attr.aria-label]="'F.METRIC.CMP.TIME_FRAME_LABEL' | translate"
        >
          @for (option of timeframeOptions; track option.id) {
            <mat-radio-button [value]="option.id">
              {{ option.labelKey | translate }}
            </mat-radio-button>
          }
        </mat-radio-group>
      </div>
    }
    <button
      mat-icon-button
      class="share-btn"
      tabIndex="-1"
      type="button"
      (click)="shareChart()"
      [disabled]="!isModuleLoaded() || isSharing()"
      [matTooltip]="'Share Chart' | translate"
    >
      @if (isSharing()) {
        <mat-icon>hourglass_empty</mat-icon>
      } @else {
        <mat-icon>share</mat-icon>
      }
    </button>
  </div>
  @if (!isModuleLoaded()) {
    <div class="chart-loading">Loading chart...</div>
  }
  @if (isModuleLoaded()) {
    <div
      class="chart-container"
      [style.height]="height()"
    >
      <canvas #canvas></canvas>
    </div>
  }
</div>
